<script setup>
const route = useRoute();
const router = useRouter();
const active = ref("Home");

watch(
  () => active.value,
  (newValue) => {
    router.replace({ name: newValue });
  }
);

watch(
  () => route.name,
  (newValue) => {
    active.value = newValue;
  }
);
</script>

<template>
  <div class="main">
    <router-view v-slot="{ components }">
      <keep-alive>
        <component :is="Component"/>
      </keep-alive>
    </router-view>
    <var-bottom-navigation v-model:active="active" border fixed safe-area>
      <var-bottom-navigation-item name="Home" label="首页" icon="home">
        <template #default></template>
      </var-bottom-navigation-item>
      <var-bottom-navigation-item name="Mine" label="我的" icon="account-circle"/>
    </var-bottom-navigation>
  </div>
</template>

<style scoped lang="less">
    .main {
        position: absolute;
        width: 100%;
        height: 100%;
    }
</style>
